{:W('Cate/header')}
{:W('Cate/left')}

<!--内容部分-->
<div class="content">
    <div class="title">
        <p>设备管理</p>
        <i class="icon-angle-right"></i>
        <p class="active">设备列表</p>
    </div>
    <div class="admin_list clearfix">
        <div class="main">
            <div class="main_title">
                <form action="{:U('device_list/device_list')}" method="get">
                <ul class="clearfix">
                    <li>
                        <span>设备名称</span>
                        <input value="{$param.devicename}" maxlength="20" name="devicename" type="text">
                    </li>
                    <button><img src="__PUBLIC__/images/seach.png">搜索</button>
                </ul>
                </form>
            </div>
            <div class="main_list">
                <div class="main_list_new">
                    <button id="add_device"><img src="__PUBLIC__/images/add_j.png">新增</button>
                </div>
                <div class="main_list_list device_list">
                    <dl>
                        <dt>
                            <span style="width:5%">序号</span>
                            <span style="width:15%;text-align:left;padding-left:20px;">设备名称</span>
                            <span style="width:30%;text-align:left;padding-left:20px;">设备序列号</span>
                            <span style="width:15%">通道数量</span>
                            <span style="width:15%">接入协议</span>
                            <!--<span style="width:15%;text-align:left;padding-left:20px;">所属区域</span>-->
                            <span style="width:10%">是否在线</span>
                            <span style="width:10%">操作</span>
                        </dt>
                        <volist name="array['devices']" id='row' key="k">
                        <dd>
                            <span style="width:5%">{$k}</span>
                            <span style="width:15%;text-align:left;padding-left:20px;">{$row['name']}</span>
                            <span style="width:30%;text-align:left;padding-left:20px;">{$row['serial']}</span>
                            <span style="width:15%">{$row['channelcnt']}</span>
                            <span style="width:15%">
                                <if condition="$row['protocoltype'] eq 0">
                                        Ehome
                                    <elseif condition="$row['protocoltype'] eq 1"/>
                                         VCloud
                                </if>
                            </span>
                            <!--<span style="width:15%;text-align:left;padding-left:20px;">{$row['areaname']}</span>-->
                            <span style="width:10%">
                            <if condition="$row['online'] eq 0">
                                       <i class="icon-circle lx"></i> 离线
                                    <elseif condition="$row['online'] eq 1"/>
                                       <i class="icon-circle zx"></i>  在线
                                </if>
                            </span>
                            <span style="width:10%">
                                <a href="{:U('device_list/device_list_xq',array('deviceid'=>$row['id'],'name'=>$row['name'],'username'=>$row['username']))}">详情</a>
                                <a class="xg" href="javascript:;" data-json='{$row|json_encode}'>修改</a>
                                <a href="javascript:;" onclick="del_device('{$row.id}','{$row.name}')">删除</a>
                            </span>
                        </dd>
                        </volist>
                    </dl>
                </div>
            </div>
            <div class="fy" id="page"></div>
        </div>
    </div>
</div>

<!--弹框-->
<!--添加子组织-->
<div class="hk"></div>
<div class="add_group add_device" style="top:10%;">
    <div class="add_group_title">
        <img src="__PUBLIC__/images/i_guanbi.png" class="icon-remove">新增设备
    </div>
    <div class="add_group_center">
        <ul>
            <!--<li>-->
                <!--<span>-->
                    <!--<i></i>所属区域：-->
                <!--</span>-->
                <!--<img src="__PUBLIC__/images/i_xiala.png" class="sj icon-sort-down">-->
                <!--<if condition="$userrole eq '2'">-->
                    <!--<input value="{$areaname}" name="areaid" disabled type="text">-->
                <!--<else/>-->
                    <!--<select class="rtsp" name="areaid"></select>-->
                <!--</if>-->
            <!--</li>-->
            <li>
                <span>
                    <i>*</i>设备名称：
                </span>
                <input value="" name="name" maxlength="20" type="text">
            </li>
            <li>
                <span>
                    <i>*</i>接入协议：
                </span>
                <img src="__PUBLIC__/images/i_xiala.png" class="sj icon-sort-down">
                <select class="rtsp" name="protocoltype">
                    <option value="">请选择接入协议</option>
                    <option value="0">ehome</option>
                    <option value="1">vcloud</option>
                </select>
            </li>
            <li>
                <span>
                    <i>*</i>序列号：
                </span>
                <input value="" name="serial" type="text">
            </li>
            <li class="num">
                <span>
                    <i>*</i>通道数量：
                </span>
                <input value="" name="channelcnt" maxlength="2" type="text">
            </li>
            <li>
                <span>
                    <i>*</i>认证方式：
                </span>
                <img src="__PUBLIC__/images/i_xiala.png" class="sj icon-sort-down">
                <select name="authenticatetype">
                    <option value="0">无需认证</option>
                    <option value="1">密码认证</option>
                </select>
            </li>
            <li style="display: none;">
                <span>
                    <i>*</i>用户名：
                </span>
                <input value="" name="username" maxlength="30" type="text">
            </li>
            <li style="display: none;">
                <span>
                    <i>*</i>密码：
                </span>
                <input value=""  name="password" maxlength="30" type="password">
            </li>
        </ul>
    </div>
    <div class="add_group_btn">
        <button>确定</button>
        <button>取消</button>
    </div>
</div>
<div class="add_group add_device2" style="top:10%;">
    <div class="add_group_title">
        <img src="__PUBLIC__/images/i_guanbi.png" class="icon-remove">修改设备
    </div>
    <div class="add_group_center">
        <ul>
            <!--<li>-->
                <!--<span>-->
                    <!--<i></i>所属区域：-->
                <!--</span>-->
                <!--<input value="" name="areaid" disabled type="text">-->
            <!--</li>-->
            <li>
                <span>
                    <i>*</i>设备名称：
                </span>
                <input value="" name="name" maxlength="20" type="text">
            </li>
            <li>
                    <span>
                        <i>*</i>接入协议：
                    </span>
                <select class="rtsp2" name="protocoltype" disabled style="background: rgb(235, 235, 228);">
                    <option value="">请选择</option>
                    <option value="0">ehome</option>
                    <option value="1">vcloud</option>
                </select>
            </li>
            <li class="num2">
                    <span>
                        <i>*</i>通道数量：
                    </span>
                <input value="" name="channelcnt" maxlength="2" type="text">
            </li>
            <li>
                <span>
                    <i>*</i>认证方式：
                </span>
                <select name="authenticatetype">
                    <option value="0">无需认证</option>
                    <option value="1">密码认证</option>
                </select>
            </li>
            <li>
                <span>
                    <i>*</i>用户名：
                </span>
                <input value="" name="username" maxlength="30" type="text">
            </li>
            <li>
                <span>
                    <i>*</i>密码：
                </span>
                <input value="" name="password" maxlength="30" type="password">
            </li>
        </ul>
    </div>
    <div class="add_group_btn">
        <button>确定</button>
        <button>取消</button>
    </div>
</div>
</body>
<script>
    // 分页
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'page'
            ,count: "<?php echo $totnum; ?>"
            ,limit: "<?php echo $pagecount; ?>"
            ,layout: ['prev', 'page', 'next', 'limit', 'skip']
            ,curr:function(){
                var page = location.search.match(/pageid=(\d+)/);
                return page ? page[1] : 1;
            }()
            ,jump: function(obj,first){  //点击页码出发的事件
                if(first!=true){  //是否首次进入页面
                    var devicename = "<?php echo $param['devicename']; ?>";
                    var _url = "/device_list/device_list?pageid="+obj.curr+"&pagecount="+obj.limit;
                    if(devicename){
                        _url = "/device_list/device_list?pageid="+obj.curr+"&pagecount="+obj.limit+"&devicename="+devicename;
                    }
                    window.location.href = _url;
                }
            }
        });
    });

    $(document).ready(function () {
        //添加
        getPopup($('#add_device'),$('.add_device'));
        //修改
        $('.main_list').find('.xg').each(function () {
            var _this = $(this);
            getPopup(_this,$('.add_device2'));
        });

        // 初始化区域列表
        $.post("{:U('user_list/getArea_list')}",{},function(data){
            var _select = $('.add_device select[name="areaid"]');
            _select.empty();
            _select.append('<option value="">请选择所属区域</option>');
            for(var i in data.areas){
                var _area = '<option value="'+data.areas[i]['id']+'">'+data.areas[i]['name']+'</option>';
                _select.append(_area);
            }
        })

        // 新增切换协议
//        $('.add_device [name="protocoltype"]').on('change',function(){
//            if($(this).val() =='1'){
//                $('.add_device [name="serial"]').attr('disabled',true);
//            } else {
//                $('.add_device [name="serial"]').attr('disabled',false);
//            }
//        })

        // 是否认证
        $('select[name="authenticatetype"]').change(function(){
            var _val = $(this).find('option:selected').val();
            console.log($(this).parent('li'));
            if(_val == '0'){
                $(this).parent('li').nextAll('li').attr('style','display:none;');
            } else {
                $(this).parents('li').nextAll('li').attr('style','display:block;');
            }
        })

        // 添加设备
        $('.add_device button').eq(0).on('click',function(){
            // 获取输入框的内容
            var _conf = get_data('.add_device');
            if(!_conf){
                return false;
            }
            $.post("{:U('device_list/AddIntercom_post')}",_conf,function(data){
                if(data.result == '0'){
                    layer.msg('新增设备成功！',{icon:1,time:2000},function(){
                        location.reload();
                    });
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        })

        // 获取编辑设备的基本信息
        $('.main_list').on('click','.xg',function(){
            var _json = $(this).attr('data-json');
            _json = JSON.parse(_json);
            var device2 = $('.add_device2');
            device2.find('input[name="name"]').val(_json.name);
            device2.find('input[name="areaid"]').val(_json.areaname);
            device2.find('select[name="protocoltype"]').val(_json.protocoltype);
            device2.find('input[name="serial"]').val(_json.serial);
            device2.find('input[name="channelcnt"]').val(_json.channelcnt);
            device2.find('select[name="authenticatetype"]').val(_json.authenticatetype);
            device2.find('input[name="username"]').val(_json.username);
            device2.find('input[name="password"]').val(_json.password);
            if(_json.authenticatetype == '0'){
                device2.find('input[name="username"],input[name="password"]').parents('li').attr('style','display:none;');
            }
            _deviceid = _json.id;
        })

        // 编辑设备
        $('.add_device2 button').eq(0).on('click','',function(){
            // 获取输入框的内容
            var _conf = get_data('.add_device2');
            if(!_conf){
                return false;
            }
            _conf['deviceid'] = _deviceid;
            $.post("{:U('device_list/ModifyIntercom_post')}",_conf,function(data){
                if(data.result == '0'){
                    layer.msg('修改设备成功！',{icon:1,time:2000},function(){
                        location.reload();
                    });
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        })

    })

    // 删除设备
    function del_device(obj,name){
        if(obj == ''){
            layer.msg('参数错误',{icon:2,time:2000});
            return;
        }
        var _length = $('.device_list dd').length;
        layer.confirm('<font style="color: red;">*</font> 确认要删除'+name+'设备吗！',function(index){
            $.post("{:U('device_list/DelIntercom_post')}",{'deviceid':obj},function(data){
                if(data.result == '0'){
                    layer.msg('删除设备成功！',{icon:1,time:2000},function(){
                        var _layui_input = $('.layui-laypage-skip .layui-input');
                        if(_length <= 1 && _layui_input.val() > 1){   // 获取上一页
                            _layui_input.val(_layui_input.val()-1);
                            $('#page .layui-laypage-btn').click();
                        } else {   // 刷新当前页
                            location.reload();
                        }
                    });
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        });
    }

    // 获取输入框内容
    function get_data(obj){
        // 获取数据
        var _input = $(obj).find('input,select').not('[disabled]');
        var _conf = {};
        _input.each(function(i){
            _conf[_input.eq(i).attr('name')] = _input.eq(i).val();
        })
        // 验证数据
        for(var i in _conf){
            if(_conf[i] == '' && i != 'username' && i != 'password' && i != 'areaid'){
                layer.msg('请把表单填写完整！',{icon:2,time:2000});
                return false;
            }
            // 验证通道数量（1-64）
            if(i == 'channelcnt'){
                var _checkChan = /^([1-9][0-9]*)$/;
                if(!_checkChan.test(_conf['channelcnt']) || _conf['channelcnt'] > 64){
                    layer.msg('通道数量范围1-64！',{icon:2,time:2000});
                    return false;
                }
            }
            if(_conf['authenticatetype'] == '1' && (!$.trim(_conf['username']) || !$.trim(_conf['password']))){
                layer.msg('请把表单填写完整！',{icon:2,time:2000});
                return false;
            }
        }
        return _conf;
    }

</script>
</html>